<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>display</title>
<!--    dispay属性：
1、none:隐藏对象，位置不保留
   隐藏方式：visibility:hidden 隐藏元素，位置保留，visibility:visible来显示
   透明度：opacity:0透明度为0，不显示
2、inline:指定对象为内联元素
3、block:指定对象为块元素
4、table-cell:指定对象作为单元格
5、inline-block:指定对象为内联块元素，这个在布局中一般使用较少
6、flex:弹性盒
-->
    <style>
        div,span{
            width: 200px;
            height: 200px;

        }
        div{
            background: red;
            display: inline;

        }
        span{
            background: #35ac5d;
        }
    </style>
</head>
<body>
<!--div:块状元素：具有宽高属性，并且独占一行-->
<div>这是块元素</div>
<!--行内元素：没有宽高属性，不会独占一行-->
<span>这是行内元素</span>
</body>
</html>